<template>
  <div
    ref="chart"
    id="main"
    style="height: 90%; width: 90%; margin: 10px auto"
  ></div>
</template>
<script>
export default {
  name: "echarts",
};
</script>
<script setup>
import { ref, onMounted } from "vue";
import http from "@/utils/request.js";
import * as echarts from "echarts";
import load from "@/utils/load.js"; // 引入

const init = async () => {
  load.show();
  let result = await http.post("app/map/list", {
    url: "https://geo.datav.aliyun.com/areas_v3/bound/350000_full.json",
  });
  let res = result.data;
  if (res.code == 200) {
    var myChart = echarts.init(document.getElementById("main"));
    echarts.registerMap("mapName", res.data); // 注册地图

    const mapData = [
      { name: "漳州市", value: 10100 },
      { name: "南平市", value: 12000 },
      { name: "三明市", value: 10300 },
      { name: "龙岩市", value: 10700 },
      { name: "厦门市", value: 100 },
      { name: "莆田市", value: 1200 },
      { name: "福州市", value: 3000 },
      { name: "泉州市", value: 1900 },
      { name: "宁德市", value: 1090 },
    ];

    let option = {
      // 图标标题
      title: {
        text: "福建地图",
      },
      // 鼠标移入显示的内容
      tooltip: {
        trigger: "item",
        formatter: "{b}<br/>{c} (p / km2)",
      },
      // 数据视图
      toolbox: {
        show: true,
        orient: "vertical",
        left: "right",
        top: "center",
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {},
        },
      },
      // 用于设置地图的高量
      visualMap: {
        min: 800,
        max: 5000,
        text: ["High", "Low"],
        realtime: false,
        calculable: true,
        inRange: {
          color: ["lightskyblue", "yellow", "orangered"],
        },
      },
      series: [
        {
          type: "map",
          map: "mapName", // 引入地图数据
          data: mapData,
          zoom: 1.2, // 改变这个值的大小就可以了
          // 开启缩放
          roam: true,
          // 设置缩放的大小
          scaleLimit: {
            min: 1.2,
            max: 30,
          },
        },
      ],
    };
    myChart.setOption(option);
    load.hide();
  } else {
    load.hide();
  }
};
onMounted(() => {
  init();
});
</script>

<style lang="less" scoped>
</style>